<template>
  <div class="demo2">
    <!-- 搜索 -->
    <SearchForm :queryData="queryData" :queryItem="queryItem" :queryHandle="queryHandle"></SearchForm>
    <!-- 列表 -->
    <div class="table">
      <TableList :tableData="tableData" :tableConfig="tableConfig" @handleRowSelect="handleRowSelect"
        @freshTableData="getData">
      </TableList>
    </div>
  </div>
</template>

<script>
import SearchForm from '@/commont/plugins/searchForm.vue'
import TableList from '@/commont/plugins/customTable.vue'
import Pagination from '@/commont/plugins/pagination.vue'
import { requestTestMock } from '@/api/api'
export default {
  name: "demo2",
  components: { SearchForm, TableList, Pagination },
  props: {},
  data() {
    return {
      // 搜索
      queryData: {//刷选条件
        age: '',
        job: '',
        currentPage: 1,
        pageSize: 10
      },
      queryItem: [//筛选数据
        { type: 'Input', label: '年龄', prop: 'age', },
        { type: 'Input', label: '职业', prop: 'job' },
      ],
      queryHandle: [//筛选按钮
        { label: '查询', type: 'primary', handle: this.getData },
        {
          label: '重置', type: 'default', handle: param => {
            Object.assign(this.queryData, { age: '', job: '', currentPage: 1, pageSize: 10 })
          }
        }
      ],
      // 列表
      tableData: {
        columns: [
          { title: '序号', type: 'index', width: '65', align: 'center' },
          { title: '用户ID', prop: 'uid', width: '320', align: 'center' },
          { title: '姓名', prop: 'name', width: '100', align: 'center' },
          { title: '年龄', prop: 'age', width: '100', align: 'center' },
          { title: '性别', prop: 'sex', width: '100', align: 'center', formatter: this.formatter },
          { title: '职业', prop: 'job', width: '120', align: 'center' },
          { title: '创建时间', prop: 'date', width: '150', align: 'center' },
          { title: '家庭地址', prop: 'address', width: '', align: 'left' },
          {
            title: '操作', type: 'btn', width: '260', align: 'center',
            btns: [
              { label: '编辑', type: "primary", plain: 'plain', click: this.handleEdit, visible: false },
              { label: '预览', type: "success", plain: 'plain', click: this.handlePreview, visible: false },
              { label: '删除', type: "danger", plain: 'plain', click: this.handleDelete, visible: false },
              { label: '审核', type: "danger", plain: 'plain', btn: true, click: this.handleAudit, visible: false },
            ],
          },
        ],
        data: [],
        total: 0,
        pageSize: 10,//显示数量
        currentPage: 1, //当前页 默认显示第一页
        sizeOpts: [10, 20, 30, 40]
      },
      tableConfig: {
        typeName: 'single', //多选:multiple  单选:single  展开行:expand
      },
      checkData: {}
    }
  },
  mounted() {
    this.getData();
  },
  updated() { },
  methods: {
    formatter(row) {
      return row.sex == 1 ? '男' : '女';
    },
    // 请求数据
    getData(params) {
      if (typeof params === 'object') { Object.assign(this.tableData, params) };
      this.queryData.pageSize = this.tableData.pageSize;
      this.queryData.currentPage = this.tableData.currentPage;
      requestTestMock(this.queryData, 'dataByPage').then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          res.data.rows.forEach(item => {
            item.isChecked = false;
          })
          this.tableData.data = res.data.rows;
          this.tableData.total = res.data.total;
        }
      })
    },
    // 单选
    handleRowSelect(data) {
      console.log('单选', data);
      this.checkData = data;
      this.tableData.data.forEach(item => {
        if (data.uid == item.uid) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 编辑
    handleEdit(idx, item) {
      console.log('编辑', item);
    },
    // 预览
    handlePreview(idx, item) {
      console.log('预览', item);
    },
    // 删除
    handleDelete(idx, item) {
      console.log('删除', item);
    },
    // 审核
    handleAudit(idx, data) {
      console.log('审核', data);
    },
  },
}
</script>

<style lang="scss" scoped>
.demo2 {
  width: 100%;
  height: calc(100% - 95px);
}
</style>